<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>别名</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Route Alias</h1>
        <ul>
            <li>
                <router-link to="/foo">
                    /foo (renders /home/foo)
                </router-link>
            </li>
            <li>
                <router-link to="/home/bar-alias">
                    /home/bar-alias (renders /home/bar)
                </router-link>
            </li>
            <li>
                <router-link to="/baz">
                    /baz (renders /home/baz)</router-link>
            </li>
            <li>
                <router-link to="/home/baz-alias">
                    /home/baz-alias (renders /home/baz)
                </router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>
    </div>
    <script type="text/javascript">
    const Home = {
        template: '<div><h1>Home</h1><router-view></router-view></div>'
    }
    const Foo = {
        template: '<div>foo</div>'
    }
    const Bar = {
        template: '<div>bar</div>'
    }
    const Baz = {
        template: '<div>baz</div>'
    }

    const router = new VueRouter({
        // mode: 'history',
        // base: __dirname,
        routes: [{
            path: '/home',
            component: Home,
            children: [
                // absolute alias
                {
                    path: 'foo',
                    component: Foo,
                    alias: '/foo'
                },
                // relative alias (alias to /home/bar-alias)
                {
                    path: 'bar',
                    component: Bar,
                    alias: 'bar-alias'
                },
                // multiple aliases
                {
                    path: 'baz',
                    component: Baz,
                    alias: ['/baz', 'baz-alias']
                }
            ]
        }]
    })

    new Vue({
        router
    }).$mount('#app')
    </script>
</body>

</html>
